<template>
  <div class="book-table">
    <el-table
      :data="books"
      style="width: 100%"
      border
      stripe
    >
      <el-table-column
        prop="id"
        label="ID"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="书名"
      >
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
      >
      </el-table-column>
      <el-table-column
        prop="copies"
        label="库存数量"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'BookTable',
  props: {
    books: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleDelete(bookId) {
      this.$confirm('确定要删除这本图书吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delete-book', bookId)
      }).catch(() => {
        this.$message.info('已取消删除')        
      })
    }
  }
}
</script>

<style scoped>
.book-table {
  margin-top: 20px;
}
</style>